<template>
  <div class="Fg-sub">
    <!-- <span>{{$attrs.__config__.componentName}}</span> -->
    <div class="Fg-sub-item" v-if="$attrs.isEdit" style="margin-bottom:0" :style="newStyle">
      <form-row-container
        :list.sync="list[0].children"
        :font="newStyle.font"
        v-bind="$attrs"
        :border="false"
      />
    </div>
    <template v-else>
      <div v-if="$attrs.subType=='form'">
        <div class="Fg-sub-item" v-for="(item,i) in formLists" :key="i" :style="newStyle">
          <div class="Fg-sub-item--top">
            第{{i+1}}项
            <i
              class="el-icon-close"
              @click="handleDelete(i)"
              v-if="!$attrs.onlyShow && formLists.length>1"
            ></i>
          </div>
          <form-row-container
            :list.sync="item.children"
            :font="newStyle.font"
            v-bind="$attrs"
            :border="false"
          />
        </div>
      </div>
      <div v-if="$attrs.subType=='table'">
        <el-table
          :header-cell-style="{background:'#f5f7fa'}"
          :data="formLists"
          style="width: 100%"
          v-bind="$attrs"
          border
          :style="newStyle"
        >
          <el-table-column type="index" :index="indexMethod"></el-table-column>
          <template v-for="(item,i) in labels">
            <el-table-column
              :label="item.label"
              :key="i"
              align="center"
              v-if="!item.isHide || $attrs.isEdit"
            >
              <template slot-scope="scope">
                <component
                  v-if="['layout','assist'].includes(scope.row.children[i].__config__.tagType)"
                  :is="scope.row.children[i].__config__.tag"
                  v-model="scope.row.children[i].__config__.defaultValue"
                  v-bind="{...$attrs,...$utils.toCamelCase($utils.deepClone(scope.row.children[i]))}"
                  :formConf="$attrs.formConf"
                  :isEdit="$attrs.isEdit"
                  :list.sync="scope.row.children[i].children"
                  :disabled="scope.row.children[i].disabled || $attrs.formConf.disabled"
                  :font="newStyle.font"
                  :onlyShow="onlyShowFun(scope.row.children[i])"
                />
                <el-form-item
                  v-else
                  label-width="0px"
                  :required="scope.row.children[i].__config__.required && !scope.row.children[i].disabled && !scope.row.children[i].readonly && !onlyShowFun(scope.row.children[i])"
                  :rules="$utils.formRules({...scope.row.children[i],onlyShow:onlyShowFun(scope.row.children[i])})"
                  :prop="scope.row.children[i].__vModel__"
                >
                  <component
                    :is="scope.row.children[i].__config__.tag"
                    v-model="scope.row.children[i].__config__.defaultValue"
                    v-bind="{...$attrs,...$utils.toCamelCase($utils.deepClone(scope.row.children[i]))}"
                    :formConf="$attrs.formConf"
                    :isEdit="$attrs.isEdit"
                    :list.sync="scope.row.children[i].children"
                    :disabled="scope.row.children[i].disabled || $attrs.formConf.disabled"
                    :onlyShow="onlyShowFun(scope.row.children[i])"
                    :font="newStyle.font"
                  />
                </el-form-item>
              </template>
            </el-table-column>
          </template>
          <el-table-column v-if="!$attrs.onlyShow" label="操作" align="center" width="150px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                :disabled="formLists.length<=1"
                @click="handleDelete(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button
        v-if="!$attrs.onlyShow"
        icon="el-icon-plus"
        style="margin-top:10px"
        @click="handleAdd"
        size="small"
        :disabled="formLists.length==$attrs.maxSize"
      >添加数据</el-button>
    </template>
  </div>
</template>
 
<script>
import { handleEvent } from "../../../utils";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-sub",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formLists: this.list.slice(1, this.list.length),
    };
  },
  computed: {
    labels() {
      return this.list[0]?.children.map((item) => {
        return {
          label: item.__config__.label,
          isHide: item.isHide,
        };
      });
    },
  },
  mounted() {
    if (this.list.length <= 1 && !this.$attrs.isEdit) {
      this.handleAdd();
    }
  },
  methods: {
    handleEvent,
    indexMethod(index) {
      return index + 1;
    },
    onlyShowFun(item) {
      return this.$attrs.onlyShow || item?.onlyShow;
    },
    handleAdd() {
      const newItem = this.list[0]?.children.map((item) => {
        return this.$utils.createFormItem(this.$utils.deepClone(item));
      });
      this.formLists.push({
        // label: `第${this.formLists.length + 1}项`,
        value: this.$utils.getUuiKey(),
        children: newItem,
      });
    },
    handleDelete(i) {
      this.formLists.splice(i, 1);
    },
  },
  watch: {
    formLists: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue && this.list.length) {
          const list = [this.list[0]].concat(newValue);
          this.$emit("update:list", list);
        }
      },
    },
  },
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
@import "@/style/color";

.Fg-sub {
  .Fg-sub-item {
    padding: 5px;
    margin-bottom: 10px;
    border-left: 3px solid #409eff !important;
    border-radius: 5px;
    background: #fafafa;
    font-size: 14px;
    color: $gray-7;
    overflow: auto;
    .Fg-sub-item--top {
      position: relative;
      padding: 10px 40px;
      text-align: right;
      .el-icon-close {
        position: absolute;
        top: 13px;
        right: 10px;
        z-index: 1;
        cursor: pointer;
      }
    }
  }
  .el-table {
    .cell {
      > .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
</style>